<header class="navbar navbar-expand flex-column flex-md-row sw-navbar position-sticky">

    <!-- <a class="navbar-brand ml-2" href="/{{$ctrl.settings.lang}}/" target="_blank" aria-label="mixcore"> -->
    <a class="navbar-brand ml-2" href="/" target="_blank" aria-label="mixcore">
        <div class="mixcore-logo"
            style="width: 120px;height: 25px;background-color: hsla(var(--primary-color-hue,211),var(--primary-color-saturation,100%),var(--primary-color-brightness,50%),1);-webkit-mask:  url(../assets/mixcore-logo-green.svg) no-repeat 50% 50%; mask: url(../assets/mixcore-logo-green.svg) no-repeat 50% 50%;">
        </div>

        <!-- <img src="{{$ctrl.settings.data.Logo}}" alt="Kiwi standing on oval" height="25px"> -->
    </a>

    <button type="button" id="sidebarCollapse" data-toggle="collapse" data-target="#sw-docs-nav"
        aria-controls="sw-docs-nav" class="btn btn-link" ng-click="$ctrl.toggleSidebar()">
        <span class="mi mi-List"></span>
    </button>

    <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex" ng-if="$ctrl.settings">

        <li class="nav-item mr-2 text-center">
            <a class="nav-link p-2" href="#" data-toggle="modal" data-target="#dlg-portal-theme-settings">
                <i class="mi mi-Personalize"></i>
            </a>
        </li>
        <li class="nav-item mr-2">
            <a class="nav-link p-2" href="#" ng-click="$ctrl.addFavorite()">
                <i class="mi mi-FavoriteList"></i>
            </a>
        </li>
        <li class="nav-item mr-2">
            <a class="nav-link p-2" href="#" data-toggle="modal" data-target="#modal-hub-messages">
                <i class="mi mi-CheckList"></i>
            </a>
        </li>
        <li class="nav-item mr-2">
            <a class="nav-link p-2" href="#" data-toggle="modal" data-target="#modal-files">
                <i class="mi mi-Media"></i>
            </a>
        </li>
        <li class="nav-item dropdown mr-2">
            <!-- <div class="language-switcher portal"></div> -->
            <a class="nav-link p-2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="true">
                <span class="flag-icon {{$ctrl.settings.langIcon}}"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item" href="" ng-repeat="culture in $ctrl.settings.cultures"
                    ng-class="{active: culture.specificulture === $ctrl.settings.lang}"
                    ng-click="$ctrl.changeLang(culture.specificulture, culture.icon);">
                    <span class="flag-icon {{culture.icon}}"></span>
                    <span ng-bind="culture.description"></span>
                </a>
            </div>
        </li>

        <li class="nav-item mr-2">
            <a class="nav-link p-2 text-danger" href="#" ng-click="$ctrl.logOut()" rel="noopener" aria-label="Logout">
                <i class="mi mi-PowerButton"></i>
            </a>
        </li>
    </ul>
    <a href="/portal/my-profile">
        <img class="rounded-circle border" alt="200x200" ng-src="{{$ctrl.avatar}}" data-holder-rendered="true"
            width="32" height="32">
    </a>
</header>